@{
    Layout = null;
}

<div id="mediaApp" style="display:none" v-on:dragover="handleScrollWhileDrag($event)">
    <div id="customdropzone">
        <h3>@T["Drop your media here"]</h3>
        <p>@T["Your files will be uploaded to the current folder when you drop them here"]</p>
    </div>

    <div class="alert message-warning" v-if="errors.length > 0">
        <ul>
            <li v-for="e in errors">
                <p>{{e}}</p>
            </li>
        </ul>
    </div>

    <div class="media-container row">
        <div id="navigationApp" class="media-container-navigation col-md-3" v-cloak>
            <h5>Media Explorer</h5>
            <ol id="media-container-navigation-menu">
                <folder :model="root" ref="rootFolder" :selected-in-media-app="selectedFolder">
                </folder>
            </ol>
        </div>

        <div class="media-container-main col-md-9" v-cloak>

            <nav class="navbar action-bar">
                <div class="dropdown d-lg-none visible-on-modal mb-1 pt-1">
                    <button class="btn btn-secondary dropdown-toggle btn-sm mr-2" type="button" id="selectionButtonsDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        @T["Actions"]
                    </button>
                    <div class="dropdown-menu" aria-labelledby="selectionButtonsDropDown">
                        <a href="javascript:;" class="dropdown-item select-all-button" v-on:click="selectAll">@T["Select All"]</a>
                        <a href="javascript:;" class="dropdown-item select-none-button" v-on:click="unSelectAll" :disabled="selectedMedias.length < 1">@T["Select None"]</a>
                        <a href="javascript:;" class="dropdown-item invert-selection-button" v-on:click="invertSelection">@T["Invert"]</a>
                        <div class="dropdown-divider"></div>
                        <a href="javascript:;" class="dropdown-item delete-all-button"
                           :class="{ disabled : selectedMedias.length < 1 }" v-on:click="deleteMediaList">
                            @T["Delete"] <span>({{ selectedMedias.length }})</span>
                        </a>
                    </div>
                </div>

                <div class="d-lg-inline-flex d-none mb-1 pt-1 hidden-on-modal">
                    <button type="button" class="btn btn-secondary btn-sm mr-1 select-all-button" v-on:click="selectAll">@T["Select All"]</button>
                    <button type="button" class="btn btn-secondary btn-sm mr-1 select-none-button" v-on:click="unSelectAll" :disabled="selectedMedias.length < 1">@T["Select None"]</button>
                    <button type="button" class="btn btn-secondary btn-sm mr-2 invert-selection-button" v-on:click="invertSelection">@T["Invert"]</button>
                    <button type="button" class="btn btn-secondary btn-sm mr-2 delete-all-button" v-on:click="deleteMediaList"
                            :disabled="selectedMedias.length < 1">
                        @T["Delete"] <span style="min-width:25px; display:inline-block;">({{ selectedMedias.length}})</span>
                    </button>
                </div>

                <div class="d-inline-flex text-right mr-2 mb-1 pt-1 media-filter">
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <button id="clear-media-filter-button" class="btn btn-outline-secondary" type="button" :disabled="mediaFilter == '' " v-on:click="mediaFilter = '' "><i class="fa fa-times"></i></button>
                        </div>
                        <input type="text" id="media-filter-input" v-model="mediaFilter" class="form-control input-filter" style="max-width:160px;" placeholder="@T["Filter..."]" aria-label="@T["Filter..."]">
                    </div>
                </div>
                <div class="d-inline-flex mb-1 pt-1">
                    <div class="btn-group btn-group-sm text-right" style="max-width:300px; width: 100%;">
                        <label for="fileupload" class="btn btn-sm btn-success fileinput-button upload-button" style="width:100%;">
                            <input id="fileupload" type="file" name="files" multiple="multiple">
                            <i class="fa fa-upload" aria-hidden="true"></i>
                            @T["Upload files..."]
                        </label>
                    </div>
                </div>
            </nav>

            <nav class="breadcrumb">
                <span class="breadcrumb-item" :class="{ active: isHome }"><a :href="isHome ? null : '#'" v-on:click="selectRoot">@T["Media Library"]</a></span>
                <span v-for="(folder, i) in parents" v-cloak
                      class="breadcrumb-item"
                      :class="{active: parents.length - i == 1}">
                    <a :href="parents.length - i == 1 ? null : '#'" v-on:click="selectedFolder = folder;">{{ folder.name }}</a>
                </span>
                <div class="btn-group breadcrumb-buttons">
                    <a v-cloak href="javascript:;" id="create-folder-button" class="btn btn-light btn-sm" v-on:click="createFolder"><i class="fa fa-plus"></i></a>
                    <a v-cloak v-show="!isHome" href="javascript:;" id="delete-folder-button" v-on:click="deleteFolder" class="btn btn-light btn-sm"><i class="fa fa-trash"></i></a>
                </div>
                <div class="btn-group visibility-buttons" v-show="gridView">
                    <button type="button" id="toggle-thumbsize-button" class="btn btn-light btn-sm" :class="{selected: smallThumbs}" v-on:click="smallThumbs = true">
                        <span title="@T["Small Thumbs"]"><i class="fa fa-compress"></i></span>                        
                    </button>
                    <button type="button" id="toggle-thumbsize-button" class="btn btn-light btn-sm mr-2" :class="{selected: !smallThumbs}" v-on:click="smallThumbs = false">
                        <span  title="@T["Large Thumbs"]"><i class="fa fa-expand"></i></span>
                    </button>
                </div>
                <div class="btn-group visibility-buttons">
                    <button type="button" id="toggle-grid-table-button" class="btn btn-light btn-sm" :class="{selected: gridView}" v-on:click="gridView = true">
                        <span title="@T["Grid View"]"><i class="fa fa-th-large"></i></span>
                    </button>
                    <button type="button" id="toggle-grid-table-button" class="btn btn-light btn-sm" :class="{selected: !gridView}" v-on:click="gridView = false">
                        <span title="@T["List View"]"><i class="fa fa-th-list"></i></span>
                    </button>
                </div>
            </nav>

            <upload-list />

            <media-items-table :sort-by="sortBy" :sort-asc="sortAsc"
                               :filtered-media-items="filteredMediaItems"
                               :selected-medias="selectedMedias"
                               :thumb-size="thumbSize"
                               v-show="filteredMediaItems.length > 0 && !gridView"></media-items-table>

            <media-items-grid v-show="gridView"
                              :filtered-media-items="filteredMediaItems"
                              :selected-medias="selectedMedias"
                              :thumb-size="thumbSize">

            </media-items-grid>

        </div>
    </div>
</div>

@* Endpoints *@
<input type="hidden" id="getFoldersUrl" value="@Url.Action("GetFolders", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteFolderUrl" value="@Url.Action("DeleteFolder", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="createFolderUrl" value="@Url.Action("CreateFolder", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="getMediaItemsUrl" value="@Url.Action("GetMediaItems", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteMediaUrl" value="@Url.Action("DeleteMedia", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="renameMediaUrl" value="@Url.Action("MoveMedia", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="deleteMediaListUrl" value="@Url.Action("DeleteMediaList", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="moveMediaListUrl" value="@Url.Action("MoveMediaList", "Admin", new { area = "OrchardCore.Media" })" />
<input type="hidden" id="uploadFiles" value="@Url.Action("Upload", "Admin", new { area = "OrchardCore.Media" })" />

@*Localizable Strings shared*@
<input type="hidden" id="deleteFolderMessage" value="@T["Are you sure you want to delete this folder?"]" />
<input type="hidden" id="deleteMediaMessage" value="@T["Are you sure you want to delete this media?"]" />
<input type="hidden" id="moveMediaMessage" value="@T["Are you sure you want to move the selected media to this folder?"]" />
<input type="hidden" id="sameFolderMessage" value="@T["The media is already on this folder"]" />
<input type="hidden" id="t-edit-button" value="@T["Edit"]" />
<input type="hidden" id="t-delete-button" value="@T["Delete"]" />


@*Localizable Strings for uploadListcomponent*@
<input type="hidden" id="t-uploads" value="@T["Uploads"]" />
<input type="hidden" id="t-errors" value="@T["Errors"]" />
<input type="hidden" id="t-clear-errors" value="@T["Clear Errors"]" />

@*Localizable Strings for mediaItemsTableComponent*@
<input type="hidden" id="t-image-header" value="@T["Image"]" />
<input type="hidden" id="t-name-header" value="@T["Name"]" />
<input type="hidden" id="t-size-header" value="@T["Size"]" />
<input type="hidden" id="t-type-header" value="@T["Type"]" />



<div class="modal" id="createFolderModal" tabindex="-1" role="dialog" aria-labelledby="createFolderModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelTitle">@T["Create Folder"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input" class="form-control-label" id="input-label">@T["Folder name"]</label>
                    <input type="text" id="create-folder-name" class="form-control">
                </div>
                <div id="createFolderModal-errors"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="modalFooterOk">@T["Ok"]</button>
                <button type="button" class="btn btn-light" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="renameMediaModal" tabindex="-1" role="dialog" aria-labelledby="renameMediaModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelTitle">@T["Rename Item"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input" class="form-control-label" id="input-label">@T["New Name"]</label>
                    <input type="text" id="new-item-name" class="form-control">
                    <input type="hidden" id="old-item-name" value="">
                </div>
                <div id="renameMediaModal-errors"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="renameMediaModalFooterOk">@T["Ok"]</button>
                <button type="button" class="btn btn-light" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

